<template>
  <div class="login">
    <vue-particles
      color="#64f4e5"
      :particleOpacity="0.3"
      :particlesNumber="50"
      shapeType="star"
      :particleSize="30"
      linesColor="#64f4e5"
      :linesWidth="1"
      :lineLinked="false"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="10"
      :hoverEffect="true"
      hoverMode="false"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    ></vue-particles>
    <el-form ref="form" :model="form" :rules="rules" class="form">
      <el-form-item>
        <img src="" class="login-img">
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名" prefix-icon="el-icon-phone-outline"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="密码"
          type="password"
          @keydown.enter.native="sign('form')"
          prefix-icon="el-icon-view"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" @click="sign('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login } from "@/api";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    sign(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //表示验证通过
          console.log(this.form);
          login(this.form).then(res => {
            //判断是否登入成功
            if (res.data.status === 200) {
              //登入成功 保存token到本地存储
              localStorage.setItem("token", res.data.token);
              //跳转到主页
              this.$router.push("/");
              //把用户名和昵称存到state
              let userInfo = {
                username: res.data.username,
                nickname: res.data.nickName
              };
              this.setUserInfo(userInfo); //调用vuex映射过来的方法
            } else {
              alert(res.data.msg);
            }
          });
        } else {
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #2f4050;
  position: fixed;
  .form {
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: #fff;
    text-align: center;
    .login-img {
      position: relative;
      left: 10%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .btn {
      width: 100%;
    }
  }
}
.lizi {
  position: absolute;
  width: 100%;
  height: 100%;
}
.el-form-item__content {
  text-align: center;
}
</style>
